import { NgClass, NgIf } from '@angular/common';
import {
  ChangeDetectionStrategy,
  Component,
} from '@angular/core';
import {
  RouterLink,
  RouterLinkActive,
  RouterOutlet,
} from '@angular/router';
import { ClickOutsideDirective } from './click-outside.directive';
import { pages } from './app.routes';
import { menuOpen } from '@core/animations';

@Component({
  selector: 'app-root',
  standalone: true,
  animations: [menuOpen],
  template: `
    <div class="navbar bg-base-100">
      <div class="navbar-start">
        <div class="dropdown">
          <button
            #menuBtn
            tabindex="0"
            role="button"
            aria-label="Hamburger Menu"
            class="btn btn-ghost btn-circle"
            (click)="showMenu = !showMenu"
          >
            <svg
              xmlns="http://www.w3.org/2000/svg"
              class="h-5 w-5"
              fill="none"
              viewBox="0 0 24 24"
              stroke="currentColor"
            >
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
                d="M4 6h16M4 12h16M4 18h7"
              />
            </svg>
          </button>
          <ul
            id="menu-list"
            *ngIf="showMenu"
            @menuOpen
            [toggle]="menuBtn"
            (clickedOutside)="closeMenuIfOpen()"
            tabindex="0"
            class="menu menu-md mt-3 z-[1] p-2 shadow-lg bg-base-100 border-indigo-600 border-2 rounded-box w-52 fixed"
            [ngClass]="{ leave: showMenu }"
          >
            @for (page of pages; track page.title) {
              <li>
                <a
                  [routerLink]="[page.link]"
                  routerLinkActive="bg-indigo-600 text-white hover:bg-indigo-700 hover:text-white"
                  (click)="showMenu = !showMenu"
                >
                  {{ page.title }}
                </a>
              </li>
            }
          </ul>
        </div>
      </div>
      <div class="navbar-center">
        <a
          [routerLink]="['/']"
          class="btn btn-ghost text-xl"
          >Forms Demo</a
        >
      </div>
      <div class="navbar-end"></div>
    </div>

    <main class="mt-6 h-screen flex justify-center">
      <router-outlet />
    </main>
  `,
  imports: [
    NgIf,
    NgClass,
    RouterOutlet,
    RouterLink,
    RouterLinkActive,
    ClickOutsideDirective,
  ],
  styleUrl: './app.component.css',
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class AppComponent {
  showMenu = false;
  pages = pages;

  closeMenuIfOpen() {
    if (this.showMenu) {
      this.showMenu = false;
    }
  }
}
